<example name="Button Group">
  <file type="html">
    <div>
      <p>
        <span id="button-group"></span>
      </p>
      <p>
        <span id="button-group-primary"></span>
      </p>
      <p>
        <span id="button-group-blue"></span>
      </p>
      <p>
        <span id="button-group-with-caption"></span>
      </p>
      <p>
        <span id="button-group-wrapped"></span>
      </p>
    </div>
  </file>

  <file type="js">
    import React from 'react';
    import {render} from 'react-dom';
    import Button from '@jetbrains/ring-ui/components/button/button';
    import ButtonGroup from '@jetbrains/ring-ui/components/button-group/button-group';

    render(
    <ButtonGroup>
      <Button>1st button</Button>
      <Button>2nd button</Button>
      <Button>3rd button</Button>
    </ButtonGroup>
    ,
    document.getElementById('button-group'));

    render(
    <ButtonGroup>
      <Button primary={true}>1st button</Button>
      <Button primary={true}>2nd button</Button>
      <Button primary={true}>3rd button</Button>
    </ButtonGroup>
    ,
    document.getElementById('button-group-primary'));

    render(
    <ButtonGroup>
      <Button blue={true}>1st button</Button>
      <Button blue={true}>2nd button</Button>
      <Button blue={true}>3rd button</Button>
    </ButtonGroup>
    , document.getElementById('button-group-blue'));

    render(
    <ButtonGroup>
      <span className="ring-button-group__caption">Side:</span>
      <Button>Left</Button>
      <Button>Right</Button>
    </ButtonGroup>
    , document.getElementById('button-group-with-caption'));

    render(
    <ButtonGroup>
      <span><Button>1st button</Button></span>
      <span><Button>2nd button</Button></span>
      <Button>3rd button</Button>
    </ButtonGroup>
    , document.getElementById('button-group-wrapped')
    );

  </file>
</example>
